<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>10-受控组件</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/prop-types.js"></script>
    <script src="./js/babel.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
    class Login extends React.Component {

        // 初始化状态
        state = {
            username: '',
            password: '',
        }

        // 渲染函数
        render() {
            return (
                <form onSubmit={this.handelSubmit}>
                    <label>用户名：<input type="text" name="username" onChange={this.saveUsername}/></label>
                    <label>密码：<input type="password" name="password" onChange={this.savePassword}/></label>
                    <button onClick={this.handelLoginClick}>登录</button>
                </form>
            )
        }

        // 保存用户名
        saveUsername = (e) => {
            this.setState({username: e.target.value}, () => {
            })
        }

        // 保存密码
        savePassword = (e) => {
            this.setState({password: e.target.value}, () => {
            })
        }

        // 处理登录点击事件
        handelLoginClick = () => {
            console.log('点击登录');
        }

        // 处理表单回调
        handelSubmit = (e) => {
            e.preventDefault()
            const username = this.state.username;
            const password = this.state.password;
            console.log(`用户名：${username}，密码：${password}`);
        }

    }

    // 渲染数据
    ReactDOM.render(<Login/>, document.getElementById('app'));
</script>
</html>
